<template>
  <view class="forget-pwd-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">重置密码</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-wrapper">
      <u-form :model="formData" ref="uForm">
        <form @submit.prevent="handleSubmit">
          <!-- 手机号输入 -->
          <u-form-item>
            <u-input v-model="formData.phone" placeholder="请输入手机号" prefixIcon="phone" clearable name="phone" autocomplete="tel">
              <template slot="suffix">
                <u-button @tap="getCode" :text="disabled ? `${timer}s` : '获取验证码'" type="primary" size="mini" :disabled="disabled"></u-button>
              </template>
            </u-input>
          </u-form-item>

          <!-- 验证码输入 -->
          <u-form-item>
            <u-input v-model="formData.code" placeholder="请输入验证码" prefixIcon="lock" clearable name="code" autocomplete="one-time-code"></u-input>
          </u-form-item>

          <!-- 新密码输入 -->
          <u-form-item>
            <u-input v-model="formData.password" type="password" placeholder="请输入新密码" prefixIcon="lock" clearable name="password" autocomplete="new-password"></u-input>
          </u-form-item>

          <!-- 确认新密码 -->
          <u-form-item>
            <u-input v-model="formData.confirmPassword" type="password" placeholder="请确认新密码" prefixIcon="lock" clearable name="confirmPassword" autocomplete="new-password"></u-input>
          </u-form-item>
        </form>
      </u-form>

      <!-- 提交按钮 -->
      <view class="btn-wrapper">
        <u-button type="primary" text="确认重置" @click="handleSubmit"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: '',
        code: '',
        password: '',
        confirmPassword: ''
      },
      disabled: false,
      timer: 60
    }
  },

  methods: {
    // 获取验证码
    async getCode() {
      if (!this.formData.phone) {
        uni.$u.toast('请输入手机号')
        return
      }
      // 手机号格式验证
      if (!uni.$u.test.mobile(this.formData.phone)) {
        uni.$u.toast('手机号格式不正确')
        return
      }

      try {
        // 调用发送验证码接口
        // await this.$store.dispatch('user/sendSmsCode', this.formData.phone)
        // uni.$u.toast('验证码发送成功')

        // 开始倒计时
        this.disabled = true
        this.timer = 60
        const countdown = setInterval(() => {
          this.timer--
          if (this.timer <= 0) {
            clearInterval(countdown)
            this.disabled = false
            this.timer = 60
          }
        }, 1000)
      } catch (error) {
        uni.$u.toast(error.message || '验证码发送失败')
      }
    },

    // 提交表单
    async handleSubmit() {
      // 表单验证
      if (!this.formData.phone || !this.formData.code || !this.formData.password || !this.formData.confirmPassword) {
        uni.$u.toast('请填写完整信息')
        return
      }

      if (!uni.$u.test.mobile(this.formData.phone)) {
        uni.$u.toast('手机号格式不正确')
        return
      }

      if (this.formData.password !== this.formData.confirmPassword) {
        uni.$u.toast('两次输入的密码不一致')
        return
      }

      try {
        // 调用重置密码接口
        // await this.$store.dispatch('user/resetPassword', this.formData)
        uni.$u.toast('密码重置成功')

        // 返回登录页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        uni.$u.toast(error.message || '重置密码失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.forget-pwd-container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40rpx;

  .header {
    padding: 60rpx 0;
    text-align: center;

    .title {
      font-size: 44rpx;
      font-weight: bold;
      color: #303133;
    }
  }

  .form-wrapper {
    padding: 0 20rpx;

    :deep(.u-form-item) {
      margin-bottom: 30rpx;

      .u-input {
        height: 90rpx;
        background-color: #f8f8f8;
        border-radius: 45rpx;
        padding: 0 30rpx;

        &__content__field {
          font-size: 28rpx;
        }
      }
    }

    .btn-wrapper {
      margin-top: 60rpx;

      :deep(.u-button) {
        height: 90rpx;
        border-radius: 45rpx;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
}

:deep(.u-button--mini) {
  padding: 0 20rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}
</style>
